<template>
  <LeftAndRight>
    <template #left-content>
      <div class="title-panel">设置</div>
      <div class="menu-list">
        <div
          :class="['menu-item', route.path == item.path ? 'menu-active' : '']"
          v-for="item in settingMenuList"
          @click="jump(item)"
        >
          <div
            :class="['iconfont', item.icon]"
            :style="{ background: item.bgColor }"
          ></div>
          <div class="menu-name">{{ item.name }}</div>
        </div>
      </div>
    </template>
    <template #right-content>
      <div class="title-panel drag"></div>
      <router-view v-slot="{ Component }">
        <component :is="Component" />
      </router-view>
    </template>
  </LeftAndRight>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

const settingMenuList = ref([
  {
    name: "个人信息",
    icon: "icon-shezhi1",
    path: "/setting/userInfo",
    bgColor: "#0294f5",
  },
]);

const jump = (data) => {
  router.push(data.path);
};
</script>

<style lang="scss" scoped>
.title-panel {
  height: 60px;
  background: #f7f7f7;
  text-align: center;
  line-height: 60px;
  font-weight: 600;
  font-size: 13px;
}

.menu-list {
  border-top: 1px solid #ddd;

  .menu-item {
    display: flex;
    align-items: center;
    padding: 10px;

    &:hover {
      cursor: pointer;
      background: #c9c8c6;
    }

    .iconfont {
      font-size: 20px;
      width: 35px;
      height: 35px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .menu-name {
      font-weight: 600;
      font-size: 13px;
      color: #000000;
      margin-left: 10px;
      flex: 1;
    }
  }

  .menu-active {
    background: #c4c4c4;

    &:hover {
      background: #c4c4c4;
    }
  }
}
</style>
